<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				width: 3000px;
				/* overflow: scroll; */
			}
			.content h3{
				text-align: center;
				background-color: aqua;
			}
			.content{
				width: 200px;
				height: 200px;
				border: 1px solid black;
				margin: 0 auto;
				overflow: scroll;
			}
		</style>
		<!-- onload事件是给window对象绑定加载事件-->
		<script>
			window.addEventListener('onload',function(){
				// const div = document.querySelector('.content');
				// const h3 = document.querySelector('h3');
				
				// div.addEventListener('scroll',function(){
				// 	console.log('我滚动了');
				// 	// scrolltop属性可以获取隐藏部分的内容距离
				// 	console.log(div.scrollTop);
				// 	// 获取html标签
				// 	console.log(document.documentElement);
				// 	if(div.scrollTop >= 300){
				// 		h3.style.position='fixed';
				// 	}else{
				// 		h3.style.display='none';
				// 		console.log('窝藏起来了')
				// 	}
				// })
				
			});
		</script>
	</head>
	<body>
		<div class="content">
			<h3>春</h3>
			春天是一年中最美丽的季节之一。当大地苏醒过来，春天的绿意四溢，花朵盛开，一切都充满了生机与希望。
			
			春天的脚步悄悄地来临，带来了温暖的阳光和微风。这时，田野里的小草从泥土中钻出来，宛如一颗颗嫩绿的珍珠。树木也开始复苏，枝条上长出了新叶，整个大自然都焕发出勃勃生机。
			
			春天是各种花朵盛开的季节。鲜艳的桃花、娇媚的梅花、热情的杜鹃花……它们争奇斗艳，像一幅五彩斑斓的画卷，给人们带来了无尽的美好。走进花海，深吸一口花香，顿时心旷神怡。
			
			春天也是动物们的繁殖季节。小鸟们开始筑巢生蛋，翩翩起舞。妈妈鸟孜孜不倦地孵着蛋，等待着小鸟的降生。森林里传来了青蛙的歌声，它们为了吸引异性，一边跳舞一边鸣叫。小动物们也离开了冬眠，活动起来，寻找食物。
			
			春天给人们带来了丰富的农作物。农田里的庄稼一片翠绿，水稻穗粒饱满，小麦也渐渐长高。农民们忙碌地耕种着，为了丰收努力奋斗着。看着收获的果实，他们满心欢喜，感受到了劳动的成果和春天的温暖。
			
			春天是一个美好的季节，也是希望的象征。在这个季节里，我们应该珍惜大自然赐予我们的一切，保护生态环境，让春天的美丽永远延续下去。让我们用心去感受春天的律动，享受春天的快乐！
		</div>
		<script>
			// const div = document.querySelector('.content');
			// const h3 = document.querySelector('h3');
			// // 为事件注册scroll页面滚动事件
			// div.addEventListener('scroll',function(){
			// 	console.log('我滚动了');
			// 	// scrolltop属性可以获取隐藏部分的内容距离
			// 	console.log(this.scrollTop);
			// 	if(this.scrollTop >= 300){
			// 		h3.style.position='fixed';
			// 	}
			// })
			const div = document.querySelector('.content');
			const h3 = document.querySelector('h3');
			
			div.addEventListener('scroll',function(){
				console.log('我滚动了');
				// scrolltop属性可以获取隐藏部分的内容距离
				// console.log(div.scrollTop);
				// 获取html标签获取方式
				console.log(document.documentElement);
				// 获取整个页面被下拉了多少距离
				const n =document.documentElement.scrollTop;
				console.log(n);
				if(div.scrollTop >= 300){
					h3.style.position='fixed';
				}
			})
		</script>
		
	</body>
</html>